<template>
  <div id="app">
     <kindeditor id="editor_id" height="300px" width="100%" :content.sync="editorText"
            :afterChange="afterChange()"
            :afterCreate="afterCreate()"
            :loadStyleMode="false"
            @on-content-change="onContentChange"></kindeditor>
  </div>
</template>

<script>
import kindeditor from './kindeditor.vue'
import {zyOffice} from '../../static/zyoffice/js/w'
import '../../static/zyoffice/css/w.css'
import '../../static/layer-v3.1.1/layer/layer'
import '../../static/layer-v3.1.1/layer/theme/default/layer.css'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'zyOffice for vue2-cli-KindEditor4',
      editorText: 'zyOffice for vue2-cli KindEditor4', // 双向同步的变量
      editorTextCopy: '' // content-change 事件回掉改变的对象
    }
  },
  components: {kindeditor},
  mounted () {
  },
  methods: {
    onContentChange (val) {
      this.editorTextCopy = val
    },
    afterChange () {
    },
    afterCreate () {
      // 初始化
      zyOffice.getInstance({
        word: 'http://localhost:13710/zyoffice/word/convert',
        wordExport: 'http://localhost:13710/zyoffice/word/export',
        pdf: 'http://localhost:13710/zyoffice/pdf/upload'
      }).SetEditor(this)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
